<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打蜜蜂</title>
432423
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:800px; height:600px; overflow:hidden; background:black; margin:20px auto; position:relative;}
#gameBtn{ color:white; font-size:20px; cursor:pointer; border:1px #FFFFFF solid; width:100px; height:30px; line-height:30px; text-align:center; position:absolute; top:285px; left:350px;}

#score{ color:#FFFFFF;}
#bee{ position:relative;}
.enemy1{ width:40px; height:28px; background:url(images/mf1.png) no-repeat; float:left;}
.enemy2{ width:40px; height:28px; background:url(images/mf2.png) no-repeat; float:left;}
.enemy3{ width:40px; height:28px; background:url(images/mf3.png) no-repeat; float:left;}

.air1{ width:46px; height:60px; background:url(images/fj.png) no-repeat; position:absolute;}
.bullet{ width:1px; overflow:hidden; height:10px; background:white; position:absolute;}
</style>
<script src="__PUBLIC__/js/jquery-1.11.3.js"></script>
<script>

//单体,一个大的json，命名空间（用点来分割）的感觉,避免起冲突
//1).元素的生成(createElement)
//2).敌人的移动(setInterval)
//3).碰撞检测(方法)
//4).敌人跟随(运动算法)
//5).关卡(实现多关)
//6).其他的功能(积分、血量)
$(document).ready(function(){
	$("#gameBtn").click(function(){
		$(this).hide();
		Game.init('div1');  //游戏gogogo!!!
	});
})


var Game = {
	oEnemy : {   //敌人的数据
		e1 : {style:'enemy1',blood:1,speed:5,score:1},
		e2 : {style:'enemy2',blood:2,speed:7,score:2},
		e3 : {style:'enemy3',blood:3,speed:10,score:3}
	},
	gk : [  //关卡的数据
		{
			eMap : [
				'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
				'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
				'e2','e2','e2','e2','e2','e2','e2','e2','e2','e2',
				'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
				'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
				'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1'
			],
			colNum : 10,//10列
			iSpeedX : 10,
			iSpeedY : 10,
			times : 2000
		},
		{
			eMap : [
				'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
				'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
				'e3','e3','e3','e3','e3','e3','e3','e3','e3','e3',
				'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
				'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1',
				'e1','e1','e1','e1','e1','e1','e1','e1','e1','e1'
			],
			colNum : 10,
			iSpeedX : 10,
			iSpeedY : 10,
			times : 2000
		}
	],
	init:function(id){
		//初始化,id成为game对象的属性，从而成为全局变量
		this.oParent = $("#"+ id);
		this.createScore();
		this.createEemey(0);
//		this.createAir();
	},
	createScore:function(){
		//积分的创建
		var str = "<div id='score'>积分:<span>0</span>分";
		this.oParent.append(str);
		this.oSNum = $("#score").find("span").html();
	},
	createEemey : function(iNow){
		//创建敌人
		var gk = this.gk[iNow];
		var bee_width = gk.colNum * 40 + 'px';
		var ul_str = "<ul id='bee' style='width:" + bee_width  + "'></ul>";
		this.oParent.append(ul_str);
		var bee_left = (this.oParent.width() - $("#bee").width())/2 + 'px';
		$("#bee").css("left",bee_left);
		
		for(var i =0;i < gk.eMap.length;i++){
			var li_str = "<li class=\""+ this.oEnemy[gk.eMap[i]].style +"\"  blood=\"" + this.oEnemy[gk.eMap[i]].blood + "\" ></li>"
		}
	}
};

</script>
</head>

<body>
<div id="div1">
	<div id="gameBtn">开始游戏</div>
</div>
</body>
</html>
